import React, { Component } from "react";

class Child extends Component {
  state = {};

  // 从props里面去得到一个state
  // 组件必须定义state才能使用这个生命周期
  // 解决了之前因为单向数据流，不能改变props的值的问题
  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps");
    // return null;
    return {
      count: props.count,
    };
  }
  render() {
    return <div>child子组件 - {this.state.count}</div>;
  }

  // getSnapshotBeforeUpdate是在更新之后，并且页面重新渲染之前调用
  // 在更新之前得到一个快照(记录)
  // 调用的时候数据已经修改完成了，所以和componentDidUpdate能拿到的数据是一模一样的
  // 只有页面上面渲染的元素是不一样的
  // 一般只return和ui相关的数据(css相关的)
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return 100;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
    console.log(snapshot);
  }
}

export default Child;
